<template>
    <!-- 向公共组件传值 -->
    <CommonCardVue :title="'今日销售额'" :value="(salesToday as number)">
        <div class="compare-wrap">
            <div class="compare">
                <div>日同比</div>
                <div class="emphasis">{{ salesGrowthLastDay }}%</div>
                <div :class="(salesGrowthLastDay as number)>0 ? 'increment' : 'decrement'"></div>
            </div>
            <div class="compare">
                <div>日同比</div>
                <div class="emphasis">{{ salesGrowthLastMonth }}%</div>
                <div :class="(salesGrowthLastMonth as number)>0 ? 'increment' : 'decrement'"></div>
            </div>
        </div>

        <!-- 底部具名插槽 -->
        <template #bottom>
            <span>昨日销售额</span>
            <span class="emphasis">{{ salesLastDay }}</span>
        </template>
    </CommonCardVue>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
    name: "TodaySales",
});
</script>

<script setup lang="ts">
import CommonCardVue from "./CommonCard.vue";
//引入store
import useDataStore from "@/stores/mock";
//引入计算属性
import { computed } from "vue";
//得到store对象
const dataStore = useDataStore();

//通过计算属性得到需要的数据
const salesToday = computed(() => dataStore.mockData.salesToday);
const salesGrowthLastDay = computed(
    () => dataStore.mockData.salesGrowthLastDay
);
const salesGrowthLastMonth = computed(
    () => dataStore.mockData.salesGrowthLastMonth
);
const salesLastDay = computed(() => dataStore.mockData.salesLastDay); 
</script>

<style lang="scss" scoped>
.compare-wrap {
    height: 100%;
    display: flex;
    flex-direction: column;
    font-size: 12px;
    font-weight: 600;
    color: #666;

    .compare {
        flex: 1;
        display: flex;
        align-items: center;
    }
}
</style>